<template>
	<view class="container">
		<uv-popup :show="show" overlayOpacity="0" mode="top" customStyle="background-color: rgb(85 0 0 / 0%);">
			<view class="" style="width: 750rpx; height: 1000rpx; z-index: 100">
				<image style="width: 100%; height: 800rpx; z-index: 100" src="../../../static/9999.png" mode=""></image>
				<view class="" style="display: flex; justify-content: center; align-items: center">
					<view
						class=""
						style="
							display: flex;
							justify-content: center;
							align-items: center;
							background-color: #f84d27;
							width: 250rpx;
							height: 60rpx;
							border-radius: 30rpx;
							color: #fff;
						"
						@click="show = false"
					>
						我知道了
					</view>
				</view>
			</view>
		</uv-popup>

		<uv-popup ref="showpopup" mode="bottom" closeable @close="close" :safeAreaInsetBottom="true">
			<view class="" style="width: 750rpx; height: 1000rpx; z-index: 100">
				<view
					class=""
					style="
						text-align: center;
						padding: 30rpx;
						font-weight: 700;
						border-bottom: 1rpx solid #f5f5f5;
						font-size: 32rpx;
					"
				>
					答题卡
				</view>
				<view class="" v-if="typeId == 0">
					<view class="" style="padding: 20rpx; border-bottom: 1rpx solid #f5f5f5">
						<view class="h-flex-item-grow h-flex-x h-flex-center">
							<view><uni-icons type="checkbox-filled" size="18" color="#0089ff"></uni-icons></view>
							<view class="success-num" style="padding-left: 10rpx; margin-right: 30rpx">
								{{ countResult.success }}
							</view>
							<view><uni-icons type="clear" size="18" color="#f84d27"></uni-icons></view>
							<view class="error-num" style="padding-left: 10rpx">{{ countResult.error }}</view>
						</view>
					</view>
					<scroll-view class="topic-list" style="height: 700rpx" scroll-y="">
						<view class="list-box h-flex-x h-flex-wrap h-flex-6">
							<view
								class="list-item"
								v-for="(item, index) in dataList"
								:key="index"
								@tap="pickerTopic(index)"
								:style="[item.questionType == 3 ? styleObj : '']"
							>
								<view
									v-if="item.questionType != 3"
									@tap="pickerTopic(index)"
									class="h-flex-x h-flex-center"
									:class="{
										active: index == topicIndex,
										success: item.answerResult && item.answer == item.answerResult,
										error: item.answerResult && item.answer != item.answerResult
									}"
								>
									<view class="">{{ index + 1 }}</view>
								</view>
								<view
									class="h-flex-x h-flex-center"
									style=""
									v-if="item.questionType == 3"
									v-for="(itemmmm, indexxxx) in item.questionStemExtJson.testQuestionList"
									:class="{
										active: index == topicIndex && indexxxx == topicTwoIndex,
										success: itemmmm.answerResult && itemmmm.answer == itemmmm.answerResult,
										error: itemmmm.answerResult && itemmmm.answer != itemmmm.answerResult
									}"
									@tap="pickerTwoTopic(index, indexxxx)"
								>
									<view class="">{{ index + 1 }}.{{ indexxxx + 1 }}</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="" v-if="typeId == 1">
					<view class="" style="padding: 20rpx; border-bottom: 1rpx solid #f5f5f5">
						<view class="h-flex-item-grow h-flex-x h-flex-center">
							<view
								style="width: 40rpx; height: 40rpx; background-color: #0089ff; border-radius: 50%"
							></view>
							<view class="success-num" style="padding-left: 10rpx; margin-right: 30rpx">已作答</view>
							<view
								style="width: 40rpx; height: 40rpx; background-color: #f84d27; border-radius: 50%"
							></view>
							<view class="error-num" style="padding-left: 10rpx">未作答</view>
						</view>
					</view>
					<scroll-view class="topic-list" style="height: 700rpx" scroll-y="">
						<view class="list-box h-flex-x h-flex-wrap h-flex-6">
							<view
								class="list-item"
								v-for="(item, index) in dataList"
								:key="index"
								@tap="pickerTopic(index)"
								:style="[item.questionType == 3 ? styleObj : '']"
							>
								<view
									class="h-flex-x h-flex-center"
									v-if="item.questionType !== 3"
									:class="{
										active: index == topicIndex,
										success1: item.answerResult,
										error1: !item.answerResult
									}"
								>
									{{ index + 1 }}
								</view>
								<view
									class="h-flex-x h-flex-center"
									style=""
									v-if="item.questionType == 3"
									v-for="(itemmmm, indexxxx) in item.questionStemExtJson.testQuestionList"
									:class="{
										active: index == topicIndex && indexxxx == topicTwoIndex,
										success1: itemmmm.answerResult,
										error1: !itemmmm.answerResult
									}"
									@tap="pickerTwoTopic(index, indexxxx)"
								>
									<view class="">{{ index + 1 }}.{{ indexxxx + 1 }}</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view
					class=""
					style="
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #0089ff;
						height: 120rpx;
						color: #fff;
						font-size: 36rpx;
					"
					v-if="typeId == 1"
				>
					交卷
				</view>
			</view>
		</uv-popup>

		<view class="swiper-box">
			<view class="action-bar h-flex-x">
				<view class="h-flex-x" @tap="close()">
					<!-- <uni-icons type="bars" size="18" color="#666"></uni-icons> -->
					<text style="padding-left: 10rpx; font-weight: bold">{{ topicIndex + 1 }}</text>
					<text style="color: #999; padding: 0 5rpx">/</text>
					<text style="color: #999">{{ dataList.length }}</text>
				</view>
				<view class="h-flex-x" style="display: flex; align-items: center">
					<view @tap="addFavorite">
						<view class="h-flex-x" v-if="!isFavorite"><uv-icon name="star" size="19"></uv-icon></view>
						<view class="h-flex-x" v-else>
							<uv-icon name="star-fill" color="#f2c304" size="19"></uv-icon>
						</view>
					</view>
					<view class="" style="padding: 0 20rpx" @tap="open()">
						<uv-icon name="order" size="19"></uv-icon>
					</view>
					<view class="" @click="jiaojuan()">交卷</view>
				</view>
			</view>
			<swiper
				class="swiper"
				:duration="duration"
				:current="swiperIndex"
				:disable-programmatic-animation="true"
				@change="onChange"
				@animationfinish="onAnimationfinish"
			>
				<swiper-item v-for="(item, index) in swiperList" :key="index">
					<scroll-view scroll-y="true" class="swiper-scroll">
						<view class="swiper-item" @touchstart="clearAutoNextTopicTime">
							<view
								class=""
								style="background-color: ; position: fixed; top: 0%; left: 0; right: 0"
								v-if="item.questionType == 3"
							>
								<uv-slider v-model="value" min="30"></uv-slider>
							</view>
							<view class="topic-content" style="padding-top: 50rpx">
								<text style="padding-right: 20rpx">
									<text class="type-label">{{ item.questionType | topicType }}</text>
								</text>
								<view style="display: flex; align-items: center">
									<u-parse :content="item.questionStemExtJson.testQuestionsContent"></u-parse>
								</view>
								<view class="answer-sheet">
									<view
										class="item h-flex-x"
										v-for="(sheetItem, sheetIndex) in item.questionStemExtJson.testQuestionOptions"
										:key="sheetIndex"
										@tap="onAnswerSheet(item, sheetIndex)"
									>
										<view
											v-if="item.questionType == 0"
											style="display: flex; justify-content: center; align-items: center"
											class="icon h-flex-x h-flex-center"
											:style="{
												border:
													sheetItem.answerResult == sheetItem.optionsName
														? '1rpx solid #0089ff'
														: '1rpx solid #f5f5f5'
											}"
										>
											<view
												style="width: 20rpx; height: 20rpx; border-radius: 10rpx"
												:style="{
													background:
														sheetItem.answerResult == sheetItem.optionsName
															? '#0089ff'
															: '#f5f5f5'
												}"
											></view>
										</view>
										<view
											v-if="item.questionType == 0"
											:style="{
												color:
													sheetItem.answerResult == sheetItem.optionsName ? '#0089ff' : '#333'
											}"
										>
											{{ sheetItem.optionsName }}
										</view>

										<view
											v-if="item.questionType !== 0"
											class="icon h-flex-x h-flex-center"
											:class="{ success: sheetItem.answerResult == sheetItem.optionsName }"
										>
											<text>{{ sheetItem.optionsName }}</text>
										</view>
										<view
											v-if="item.questionType !== 0"
											:style="{
												color:
													sheetItem.answerResult == sheetItem.optionsName ? '#0089ff' : '#333'
											}"
										>
											{{ sheetItem.centent }}
										</view>
									</view>
								</view>
								<view class="answer-result" v-if="item.answerResult && typeId == 0">
									<text>答案</text>
									<text style="color: #0089ff; font-weight: bold; padding: 0 20rpx">
										{{ item.answer }}
									</text>
									<text style="padding-right: 20rpx">您选择</text>
									<text
										style="color: #0089ff; font-weight: bold"
										v-if="item.answerResult == item.answer"
									>
										{{ item.answerResult }}
									</text>
									<text style="color: #f84d27; font-weight: bold" v-else>
										{{ item.answerResult }}
									</text>
								</view>
								<view class="answer-doubt" v-if="item.answerResult && typeId == 0">
									<text style="font-weight: bold">题目解析：</text>
									<u-parse :content="item.questionAnalysisExtJson"></u-parse>
								</view>
								<view
									class=""
									v-if="!item.answerResult && item.questionType == 2 && typeId == 0"
									style="display: flex; align-items: center; justify-content: center; width: 700rpx"
								>
									<uv-button type="primary" text="提交答案" @click="submitResult(item)"></uv-button>
								</view>
								<view
									class=""
									v-if="item.questionType == 2 && typeId == 1"
									style="display: flex; align-items: center; justify-content: center; width: 700rpx"
								>
									<uv-button type="primary" text="提交答案" @click="submitResult(item)"></uv-button>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>

			<swiper
				class="swiper"
				v-if="swiperTwoList.length > 0"
				:duration="duration"
				:current="swiperTwoIndex"
				:disable-programmatic-animation="true"
				@change="onTwoChange"
				@animationfinish="onTwoAnimationfinish"
				style="position: fixed; top: 50%; left: 0; right: 0"
				:style="{ top: value + '%' }"
			>
				<swiper-item v-for="(item, index) in swiperTwoList" :key="index">
					<view class="action-bar h-flex-x" style="background-color: #fff; border-top: 1rpx solid #e8e8e8">
						<view class="h-flex-x" style="display: flex; align-items: center">
							本大题共{{ swiperTwoList.length }}小题
						</view>
						<view class="h-flex-x" @tap="close()">
							<text style="padding-left: 10rpx; font-weight: bold">{{ topicTwoIndex + 1 }}</text>
							<text style="color: #999; padding: 0 5rpx">/</text>
							<text style="color: #999">{{ swiperTwoList.length }}</text>
						</view>
					</view>
					<scroll-view scroll-y="true" class="swiper-scroll">
						<view class="swiper-item" @touchstart="clearAutoNextTopicTime">
							<view class="topic-content" style="padding-bottom: 70vh; background-color: #fff">
								<text style="padding-right: 20rpx">
									<text class="type-label">{{ item.questionType | topicType }}</text>
								</text>
								<view style=""><u-parse :content="item.testQuestionsContent"></u-parse></view>
								<view class="answer-sheet">
									<view
										class="item h-flex-x"
										v-for="(sheetItem, sheetIndex) in item.testQuestionOptions"
										:key="sheetIndex"
										@tap="onAnswerTwoSheet(item, sheetIndex)"
									>
										<view
											v-if="item.questionType == 0"
											style="display: flex; justify-content: center; align-items: center"
											class="icon h-flex-x h-flex-center"
											:style="{
												border:
													sheetItem.answerResult == sheetItem.optionsName
														? '1rpx solid #0089ff'
														: '1rpx solid #f5f5f5'
											}"
										>
											<view
												style="width: 20rpx; height: 20rpx; border-radius: 10rpx"
												:style="{
													background:
														sheetItem.answerResult == sheetItem.optionsName
															? '#0089ff'
															: '#f5f5f5'
												}"
											></view>
										</view>
										<view
											v-if="item.questionType == 0"
											:style="{
												color:
													sheetItem.answerResult == sheetItem.optionsName ? '#0089ff' : '#333'
											}"
										>
											{{ sheetItem.optionsName }}
										</view>

										<view
											v-if="item.questionType !== 0"
											class="icon h-flex-x h-flex-center"
											:class="{ success: sheetItem.answerResult == sheetItem.optionsName }"
										>
											<text>{{ sheetItem.optionsName }}</text>
										</view>
										<view
											v-if="item.questionType !== 0"
											:style="{
												color:
													sheetItem.answerResult == sheetItem.optionsName ? '#0089ff' : '#333'
											}"
										>
											{{ sheetItem.centent }}
										</view>
									</view>
								</view>
								<view class="answer-result" v-if="item.answerResult && typeId == 0">
									<text>答案</text>
									<text style="color: #0089ff; font-weight: bold; padding: 0 20rpx">
										{{ item.answer }}
									</text>
									<text style="padding-right: 20rpx">您选择</text>
									<text
										style="color: #0089ff; font-weight: bold"
										v-if="item.answerResult == item.answer"
									>
										{{ item.answerResult }}
									</text>
									<text style="color: #f84d27; font-weight: bold" v-else>
										{{ item.answerResult }}
									</text>
								</view>
								<view class="answer-doubt" v-if="item.answerResult && typeId == 0">
									<text style="font-weight: bold">题目解析：</text>
									<u-parse :content="item.analysis"></u-parse>
								</view>
								<view
									class=""
									v-if="!item.answerResult && item.questionType == 2 && typeId == 0"
									style="display: flex; align-items: center; justify-content: center; width: 700rpx"
								>
									<uv-button
										type="primary"
										text="提交答案"
										@click="submitTwoResult(item)"
									></uv-button>
								</view>
								<view
									class=""
									v-if="item.questionType == 2 && typeId == 1"
									style="display: flex; align-items: center; justify-content: center; width: 700rpx"
								>
									<uv-button
										type="primary"
										text="提交答案"
										@click="submitTwoResult(item)"
									></uv-button>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import {
	getUserCollectTestQuestionsList,
	updatePlugsPracticeTestRecord,
	getPracticeTestQuestionsByquestionBankList,
	insertPlugsPracticeTestRecordDetails,
	insertPlugsCollect,
	cancelCollectByDataId,
	getPlugsPracticeTestRecordDetailsByPracticeId,
	updatePlugsPracticeTestRecordDetails,
	insertPlugsPracticeTestRecord,
	insertPlugsPracticeTestRecordDetailsList
} from '../../utils/api.js';
export default {
	data() {
		return {
			dataList: [], // 数据源
			swiperList: [], // 轮播图数据列表
			swiperIndex: 0, // 轮播图当前位置
			swiperTwoIndex: 0, // 理解题轮播图当前位置
			isChange: false, // 是否切换
			isTwoChange: false, // 是否切换
			topicIndex: 0, // 题目位置
			topicTwoIndex: 0, //理解题题目位置
			duration: 200, // 动画过渡时长
			showPopup: false,
			info: {},
			show: false,
			typeId: 0,
			practiceId: 0,
			collectList: [],
			swiperTwoList: [], //理解子试题
			value: 50,
			styleObj: {
				display: 'flex',
				width: 'auto',
				flexWrap: 'wrap'
			},
			accuracy: 0
		};
	},
	computed: {
		// 结果统计
		countResult() {
			let [success, error] = [0, 0];
			this.dataList.forEach((item) => {
				if (item.questionType != 3) {
					if (item.answerResult) {
						if (item.answerResult == item.answer) {
							success++;
						} else {
							error++;
						}
					}
				} else {
					item.questionStemExtJson.testQuestionList.forEach((itemm) => {
						if (itemm.answerResult) {
							if (itemm.answerResult == itemm.answer) {
								success++;
							} else {
								error++;
							}
						}
					});
				}
			});
			return {
				success,
				error
			};
		},
		// 是否收藏
		isFavorite() {
			let item = this.dataList[this.topicIndex];
			if (item && item.favorite) {
				return true;
			}
			return false;
		}
	},
	filters: {
		topicType(type) {
			if (type == 0) {
				return '判断题';
			}
			if (type == 1) {
				return '单选题';
			}
			if (type == 2) {
				return '多选题';
			}
			if (type == 3) {
				return '理解题';
			}

			return '';
		}
	},
	onShow() {
		this.getcollectList();
	},
	onLoad(option) {
		this.info = JSON.parse(decodeURIComponent(option.info));
		this.typeId = option.typeId;
		if (option.practiceId) {
			this.practiceId = option.practiceId;
		}
		uni.setNavigationBarTitle({
			title: this.info.testPaperName
		});
		this.getDataList();
	},
	
	onUnload() {
		let that=this;
		let data = {
			studentId: uni.getStorageSync('studentInfo').id,
			adminId: uni.getStorageSync('userInfo').adminId || 47,
			userServiceToken:
				uni.getStorageSync('userInfo').userServiceToken || 'TUW8JF4WE6D52SDL5UMN5',
			id: 0,
			startTime: '',
			testFraction: 0,
			testId: that.info.id,
			testStatus: 0,
			testType: that.typeId,
			endTestTime: that.dateFormat(new Date().getTime()),
			testNo: that.info.testPaperName,
			accuracy: that.accuracy
		};
		insertPlugsPracticeTestRecord(data).then((ress) => {
			if (ress.code == 200) {
				uni.reLaunch({
					url: `/pages/user/testList/testReslut?dataId=${ress.body.id}&contentId=${that.info.id}`
				});
			}
			let arrList = [];
			that.dataList.forEach((item) => {
				if (item.questionType != 3) {
					if (item.answerResult) {
						let postData = {
							adminId: uni.getStorageSync('userInfo').adminId || 47,
							userServiceToken:
								uni.getStorageSync('userInfo').userServiceToken ||
								'TUW8JF4WE6D52SDL5UMN5',
							answerStatus: item.answerResult == item.answer ? 0 : 1,
							testId: ress.body.id,
							testQuestionsId: item.id,
							userAnswer: item.answerResult,
							userId: uni.getStorageSync('userInfo').id
						};
						arrList.push(postData);
					}
				} else {
					item.questionStemExtJson.testQuestionList.forEach((element, indexs) => {
						if (element.answerResult) {
							let postData = {
								adminId: uni.getStorageSync('userInfo').adminId || 47,
								userServiceToken:
									uni.getStorageSync('userInfo').userServiceToken ||
									'TUW8JF4WE6D52SDL5UMN5',
								answerStatus: element.answerResult == element.answer ? 0 : 1,
								testId: ress.body.id,
								testQuestionsId: item.id,
								userAnswer: '理解题_' + indexs + '_' + element.answerResult,
								userId: uni.getStorageSync('userInfo').id
							};
							arrList.push(postData);
						}
					});
				}
			});
			insertPlugsPracticeTestRecordDetailsList(arrList);
		});
	},
	methods: {
		open() {
			this.$refs.showpopup.open();
		},
		close() {
			this.$refs.showpopup.close();
		},
		getDataList() {
			this.dataList = JSON.parse(this.info.questionsJson);
			this.dataList.forEach((item) => {
				item.answer = [];
				item.list = [];
				if (item.questionType != 3) {
					item.questionStemExtJson.testQuestionOptions.forEach((result) => {
						if (result.answerStatus == 1) {
							item.answer.push(result.optionsName);
						}
					});
				}
			});
			this.dataList.forEach((item) => {
				this.collectList.forEach((sul) => {
					if (item.id == sul.dataId) {
						item.favorite = true;
					}
				});
			});
			this.renderSwiper(0);
		},
		getcollectList() {
			let self = this;
			let postdata = {
				page: 1,
				size: 50,
				businessId: 0,
				userServiceToken: uni.getStorageSync('userInfo').userServiceToken || 'TUW8JF4WE6D52SDL5UMN5'
			};
			getUserCollectTestQuestionsList(postdata).then((res) => {
				if (res.code == 200) {
					this.collectList = res.body.list;
					this.getDataList();
				}
			});
		},
		dateFormat(time) {
			//将时间戳格式转换成年月日时分秒
			let date = new Date(time);
			let Y = date.getFullYear() + '-';
			let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';

			let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
			let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			let strDate = Y + M + D + h + m + s;
			return strDate;
		},
		jiaojuan() {
			let that = this;
			uni.showModal({
				content: '您是否交卷？',
				cancelText: '继续做题',
				confirmText: '交卷',
				success(res) {
					if (res.confirm) {
						let data = {
							studentId: uni.getStorageSync('studentInfo').id,
							adminId: uni.getStorageSync('userInfo').adminId || 47,
							userServiceToken:
								uni.getStorageSync('userInfo').userServiceToken || 'TUW8JF4WE6D52SDL5UMN5',
							id: 0,
							startTime: '',
							testFraction: 0,
							testId: that.info.id,
							testStatus: 1,
							testType: that.typeId,
							endTestTime: that.dateFormat(new Date().getTime()),
							testNo: that.info.testPaperName,
							accuracy: that.accuracy
						};
						insertPlugsPracticeTestRecord(data).then((ress) => {
							if (ress.code == 200) {
								uni.reLaunch({
									url: `/pages/user/testList/testReslut?dataId=${ress.body.id}&contentId=${that.info.id}`
								});
							}
							let arrList = [];
							that.dataList.forEach((item) => {
								if (item.questionType != 3) {
									if (item.answerResult) {
										let postData = {
											adminId: uni.getStorageSync('userInfo').adminId || 47,
											userServiceToken:
												uni.getStorageSync('userInfo').userServiceToken ||
												'TUW8JF4WE6D52SDL5UMN5',
											answerStatus: item.answerResult == item.answer ? 0 : 1,
											testId: ress.body.id,
											testQuestionsId: item.id,
											userAnswer: item.answerResult,
											userId: uni.getStorageSync('userInfo').id
										};
										arrList.push(postData);
									}
								} else {
									item.questionStemExtJson.testQuestionList.forEach((element, indexs) => {
										if (element.answerResult) {
											let postData = {
												adminId: uni.getStorageSync('userInfo').adminId || 47,
												userServiceToken:
													uni.getStorageSync('userInfo').userServiceToken ||
													'TUW8JF4WE6D52SDL5UMN5',
												answerStatus: element.answerResult == element.answer ? 0 : 1,
												testId: ress.body.id,
												testQuestionsId: item.id,
												userAnswer: '理解题_' + indexs + '_' + element.answerResult,
												userId: uni.getStorageSync('userInfo').id
											};
											arrList.push(postData);
										}
									});
								}
							});
							insertPlugsPracticeTestRecordDetailsList(arrList);
						});
					} else if (res.cancel) {
					}
				}
			});
		},
	
		// 渲染 swiper
		renderSwiper(index) {
			let list = [];
			let current = 1;
			if (this.dataList[index - 1]) {
				list.push(this.dataList[index - 1]);
			} else {
				current = 0;
			}
			list.push(this.dataList[index]);
			if (this.dataList[index + 1]) {
				list.push(this.dataList[index + 1]);
			}

			this.duration = 0;

			setTimeout(() => {
				this.swiperList = list;
				this.swiperIndex = current;
				this.topicTwoIndex = 0;
				this.swiperTwoIndex = 0;
				if (this.swiperList[this.swiperIndex].questionType == 3) {
					this.swiperTwoList = this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionList;

					this.swiperTwoList.forEach((item) => {
						item.answer = [];
						item.list = [];
						item.testQuestionOptions.forEach((result) => {
							if (result.answerStatus == 1) {
								item.answer.push(result.optionsName);
							}
						});
					});
				} else {
					this.swiperTwoList = [];
				}

				setTimeout(() => {
					this.duration = 200;
				}, 100);
			}, 50);
		},
		renderTwoSwiper(index, indexxxx) {
			let list = [];
			let current = 1;
			if (this.dataList[index - 1]) {
				list.push(this.dataList[index - 1]);
			} else {
				current = 0;
			}
			list.push(this.dataList[index]);
			if (this.dataList[index + 1]) {
				list.push(this.dataList[index + 1]);
			}

			this.duration = 0;

			setTimeout(() => {
				this.swiperList = list;
				this.swiperIndex = current;
				this.topicTwoIndex = indexxxx;
				this.swiperTwoIndex = indexxxx;
				if (this.swiperList[this.swiperIndex].questionType == 3) {
					this.swiperTwoList = this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionList;
					this.swiperTwoList.forEach((item) => {
						item.answer = [];
						item.list = [];
						item.testQuestionOptions.forEach((result) => {
							if (result.answerStatus == 1) {
								item.answer.push(result.optionsName);
							}
						});
					});
				} else {
					this.swiperTwoList = [];
				}

				setTimeout(() => {
					this.duration = 200;
				}, 100);
			}, 50);
		},
		// 轮播图切换
		onChange(e) {
			// 非触摸事件不做轮播图状态更新
			if (e.detail.source != 'touch') return;

			// 标识已切换
			this.isChange = true;
			// 轮播图当前位置大于原来时则表示为下一题
			if (e.detail.current > this.swiperIndex) {
				this.topicIndex++;
			} else {
				// 轮播图当前位置小于原来时则表示为上一题
				this.topicIndex--;
			}

			// 更新轮播图位置数值，为更新时让 Vue 能监听到数据有改变
			this.swiperIndex = e.detail.current;
		},
		// 轮播图动画结束
		onAnimationfinish(e) {
			if (!this.isChange) return;

			this.isChange = false;
			setTimeout(() => {
				this.renderSwiper(this.topicIndex);
			}, 10);
		},
		// 理解题轮播图切换
		onTwoChange(e) {
			// 非触摸事件不做轮播图状态更新
			if (e.detail.source != 'touch') return;

			// 标识已切换
			this.isTwoChange = true;
			// 轮播图当前位置大于原来时则表示为下一题
			if (e.detail.current > this.swiperTwoIndex) {
				this.topicTwoIndex++;
			} else {
				// 轮播图当前位置小于原来时则表示为上一题
				this.topicTwoIndex--;
			}

			// 更新轮播图位置数值，为更新时让 Vue 能监听到数据有改变
			this.swiperTwoIndex = e.detail.current;
		},
		// 理解题轮播图动画结束
		onTwoAnimationfinish(e) {
			if (!this.isTwoChange) return;

			this.isTwoChange = false;
			setTimeout(() => {
				// this.renderSwiper(this.topicIndex);
			}, 10);
		},

		// 选择题目
		pickerTopic(index) {
			this.topicIndex = index;
			this.renderSwiper(index);
			this.close();
		},
		//理解选择题目
		pickerTwoTopic(index, indexxxx) {
			this.topicIndex = index;
			this.topicTwoIndex = indexxxx;
			this.renderTwoSwiper(index, indexxxx);
			this.close();
		},

		// 监听答题
		onAnswerSheet(item, index) {
			if (this.typeId == 0) {
				if (this.swiperList[this.swiperIndex].answerResult) {
					// 不能重复答题
					return;
				}
				if (item.questionType == 0 || item.questionType == 1) {
					let seelctedValue =
						this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index].optionsName;
					this.$set(
						this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index],
						'answerResult',
						seelctedValue
					);
					this.$set(this.swiperList[this.swiperIndex], 'answerResult', seelctedValue);

					let postData = {
						adminId: uni.getStorageSync('userInfo').adminId || 47,
						userServiceToken: uni.getStorageSync('userInfo').userServiceToken || 'TUW8JF4WE6D52SDL5UMN5',
						answerStatus: item.answerResult == item.answer ? 0 : 1,
						testId: this.practiceId,
						testQuestionsId: item.id,
						userAnswer: item.answerResult,
						userId: uni.getStorageSync('userInfo').id
					};
				} else if (item.questionType == 2) {
					if (
						!this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index].answerResult
					) {
						let seelctedValue =
							this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index]
								.optionsName;
						this.$set(
							this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index],
							'answerResult',
							seelctedValue
						);
						this.swiperList[this.swiperIndex].list.push(seelctedValue);
					} else {
						let seelctedValue1 =
							this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index]
								.optionsName;
						this.$set(
							this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index],
							'answerResult',
							''
						);
						this.swiperList[this.swiperIndex].list.splice(
							this.swiperList[this.swiperIndex].list.findIndex((item) => item === seelctedValue1),
							1
						);
					}
				}
			} else {
				if (item.questionType == 0 || item.questionType == 1) {
					let seelctedValue =
						this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index].optionsName;
					this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions.forEach((item) => {
						item.answerResult = '';
					});
					this.$set(
						this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index],
						'answerResult',
						seelctedValue
					);
					this.$set(this.swiperList[this.swiperIndex], 'answerResult', seelctedValue);

					let pickerIndex = this.topicIndex + 1;
					if (pickerIndex < this.dataList.length) {
						this.pickerTopic(pickerIndex);
					}
				} else if (item.questionType == 2) {
					if (
						!this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index].answerResult
					) {
						let seelctedValue =
							this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index]
								.optionsName;
						this.$set(
							this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index],
							'answerResult',
							seelctedValue
						);
						this.swiperList[this.swiperIndex].list.push(seelctedValue);
					} else {
						let seelctedValue1 =
							this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index]
								.optionsName;
						this.$set(
							this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index],
							'answerResult',
							''
						);
						this.swiperList[this.swiperIndex].list.splice(
							this.swiperList[this.swiperIndex].list.findIndex((item) => item === seelctedValue1),
							1
						);
					}
				}
			}

			let list2 = [];
			let list3 = [];
			list2 = this.dataList.filter(
				(item) => item.questionType == 0 || item.questionType == 1 || item.questionType == 2
			);
			list3 = this.dataList.filter((item) => item.questionType == 3);
			let list4 = [];
			if (list3.length > 0) {
				list3.forEach((item) => {
					list4 = list4.concat(item.questionStemExtJson.testQuestionList);
				});
			}

			let list = [];
			this.dataList.forEach((item) => {
				if (item.questionType == 0 || item.questionType == 1) {
					if (item.answerResult) {
						if (item.answer.toString() == item.answerResult) {
							list.push(item);
						}
					}
				} else if (item.questionType == 2) {
					if (item.list.length > 0) {
						if (item.answer.toString() == item.list.toString()) {
							list.push(item);
						}
					}
				} else if (item.questionType == 3) {
					item.questionStemExtJson.testQuestionList.forEach((itm) => {
						if (itm.questionType == 1 || itm.questionType == 0) {
							if (itm.answerResult) {
								if (itm.answer.toString() == itm.answerResult) {
									list.push(itm);
								}
							}
						} else if (itm.questionType == 2) {
							if (itm.list) {
								if (itm.answer.toString() == itm.list.toString()) {
									list.push(itm);
								}
							}
						}
					});
				}
			});
			let num = ((list.length / (list2.length + list4.length)) * 100).toFixed(2);
			this.accuracy = num;
		},
		onAnswerTwoSheet(item, index) {
			if (this.typeId == 0) {
				if (this.swiperTwoList[this.swiperTwoIndex].answerResult) {
					// 不能重复答题
					return;
				}
				if (item.questionType == 0 || item.questionType == 1) {
					let seelctedValue = this.swiperTwoList[this.swiperTwoIndex].testQuestionOptions[index].optionsName;
					this.$set(
						this.swiperTwoList[this.swiperTwoIndex].testQuestionOptions[index],
						'answerResult',
						seelctedValue
					);
					this.$set(this.swiperTwoList[this.swiperTwoIndex], 'answerResult', seelctedValue);
				} else if (item.questionType == 2) {
					if (!this.swiperTwoList[this.swiperTwoIndex].testQuestionOptions[index].answerResult) {
						let seelctedValue =
							this.swiperTwoList[this.swiperTwoIndex].testQuestionOptions[index].optionsName;
						this.$set(
							this.swiperTwoList[this.swiperTwoIndex].testQuestionOptions[index],
							'answerResult',
							seelctedValue
						);
						this.swiperTwoList[this.swiperTwoIndex].list.push(seelctedValue);
					} else {
						let seelctedValue1 =
							this.swiperTwoList[this.swiperTwoIndex].testQuestionOptions[index].optionsName;
						this.$set(
							this.swiperTwoList[this.swiperTwoIndex].testQuestionOptions[index],
							'answerResult',
							''
						);
						this.swiperTwoList[this.swiperTwoIndex].list.splice(
							this.swiperTwoList[this.swiperTwoIndex].list.findIndex((item) => item === seelctedValue1),
							1
						);
					}
				}
			} else {
				if (item.questionType == 0 || item.questionType == 1) {
					let seelctedValue = this.swiperTwoList[this.swiperTwoIndex].testQuestionOptions[index].optionsName;
					this.swiperTwoList[this.swiperTwoIndex].testQuestionOptions.forEach((item) => {
						item.answerResult = '';
					});
					this.$set(
						this.swiperTwoList[this.swiperTwoIndex].testQuestionOptions[index],
						'answerResult',
						seelctedValue
					);
					this.$set(this.swiperTwoList[this.swiperTwoIndex], 'answerResult', seelctedValue);
					let pickerIndex = this.topicIndex;
					let pickertwoIndex = this.topicTwoIndex + 1;
					if (pickertwoIndex < this.swiperTwoList.length) {
						this.pickerTwoTopic(pickerIndex, pickertwoIndex);
					} else {
						if (pickerIndex < this.dataList.length) {
							this.pickerTopic(pickerIndex + 1);
						}
					}
				} else if (item.questionType == 2) {
					if (this.swiperTwoList[this.swiperTwoIndex].answerResult) {
						this.$set(
							this.swiperTwoList[this.swiperTwoIndex],
							'list',
							this.swiperTwoList[this.swiperTwoIndex].answerResult.split(',')
						);
					}
					if (!this.swiperTwoList[this.swiperTwoIndex].testQuestionOptions[index].answerResult) {
						let seelctedValue =
							this.swiperTwoList[this.swiperTwoIndex].testQuestionOptions[index].optionsName;
						this.$set(
							this.swiperTwoList[this.swiperTwoIndex].testQuestionOptions[index],
							'answerResult',
							seelctedValue
						);
						this.swiperTwoList[this.swiperTwoIndex].list.push(seelctedValue);
					} else {
						let seelctedValue1 =
							this.swiperTwoList[this.swiperTwoIndex].testQuestionOptions[index].optionsName;
						this.$set(
							this.swiperTwoList[this.swiperTwoIndex].testQuestionOptions[index],
							'answerResult',
							''
						);
						this.swiperTwoList[this.swiperTwoIndex].list.splice(
							this.swiperTwoList[this.swiperTwoIndex].list.findIndex((item) => item === seelctedValue1),
							1
						);
					}
				}
			}
			let list2 = [];
			let list3 = [];
			list2 = this.dataList.filter(
				(item) => item.questionType == 0 || item.questionType == 1 || item.questionType == 2
			);
			list3 = this.dataList.filter((item) => item.questionType == 3);
			let list4 = [];
			if (list3.length > 0) {
				list3.forEach((item) => {
					list4 = list4.concat(item.questionStemExtJson.testQuestionList);
				});
			}
			let list = [];
			this.dataList.forEach((item) => {
				if (item.questionType == 0 || item.questionType == 1) {
					if (item.answerResult) {
						if (item.answer.toString() == item.answerResult) {
							list.push(item);
						}
					}
				} else if (item.questionType == 2) {
					if (item.list.length > 0) {
						if (item.answer.toString() == item.list.toString()) {
							list.push(item);
						}
					}
				} else if (item.questionType == 3) {
					item.questionStemExtJson.testQuestionList.forEach((itm) => {
						if (itm.questionType == 1 || itm.questionType == 0) {
							if (itm.answerResult) {
								if (itm.answer.toString() == itm.answerResult) {
									list.push(itm);
								}
							}
						} else if (itm.questionType == 2) {
							if (itm.list) {
								if (itm.answer.toString() == itm.list.toString()) {
									list.push(itm);
								}
							}
						}
					});
				}
			});
			let num = ((list.length / (list2.length + list4.length)) * 100).toFixed(2);
			this.accuracy = num;
		},

		submitResult(item) {
			if (this.typeId == 0) {
				//开卷
				this.$set(this.swiperList[this.swiperIndex], 'answerResult', item.list.sort().join());
			} else {
				this.$set(this.swiperList[this.swiperIndex], 'answerResult', item.list.sort().join());
				let pickerIndex = this.topicIndex + 1;
				if (pickerIndex < this.dataList.length) {
					this.pickerTopic(pickerIndex);
				}
			}
		},
		submitTwoResult(item) {
			let that = this;
			if (this.typeId == 0) {
				this.$set(this.swiperTwoList[this.swiperTwoIndex], 'answerResult', item.list.sort().join());
			} else {
				this.$set(this.swiperTwoList[this.swiperTwoIndex], 'answerResult', item.list.sort().join());
				let pickerIndex = this.topicIndex;
				let pickertwoIndex = this.topicTwoIndex + 1;
				if (pickertwoIndex < this.swiperTwoList.length) {
					this.pickerTwoTopic(pickerIndex, pickertwoIndex);
				} else {
					if (pickerIndex < this.dataList.length) {
						this.pickerTopic(pickerIndex + 1);
					}
				}
			}
		},
		// 清除自动跳到下一页延时器
		clearAutoNextTopicTime() {
			clearTimeout(this.autoNextTopicTime);
		},
		// 添加收藏
		addFavorite() {
			let favorite = this.dataList[this.topicIndex].favorite;
			if (favorite) {
				delete this.dataList[this.topicIndex].favorite;
				this.$set(this.dataList[this.topicIndex], 'favorite', !favorite);
				let postData = {
					dataId: this.dataList[this.topicIndex].id,
					dataType: 3
				};
				cancelCollectByDataId(postData).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '取消收藏',
							duration: 1000,
							icon: 'success'
						});
					} else {
					}
				});
			} else {
				this.$set(this.dataList[this.topicIndex], 'favorite', !favorite);
				let postData = {
					dataId: this.dataList[this.topicIndex].id,
					types: 3,
					businessId: 0
				};
				insertPlugsCollect(postData).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '收藏成功',
							duration: 1000,
							icon: 'success'
						});
					} else {
					}
				});
			}
		}
	}
};
</script>

<style lang="scss">
@import 'lib/helang-flex.scss';

page {
	height: 100%;
}

.actives {
	color: red;
}

.actives1 {
	color: #fff;
}

// 容器
.container {
	height: 100%;
	background-color: #fff;
	position: relative;
	color: #333;
	font-size: 28rpx;
}

// 轮播盒子
.swiper-box {
	position: absolute;
	top: 0rpx;
	left: 0;
	right: 0;
	bottom: 100rpx;
	height: auto;
	width: auto;
	z-index: 1;
}

.action-bar {
	height: 100rpx;
	width: 100%;
	box-sizing: border-box;
	border-bottom: #ddd solid 1px;
	font-size: 28rpx;
	padding: 0 30rpx;
	display: flex;
	justify-content: space-between;

	.success-num {
		color: #0089ff;
	}

	.error-num {
		color: #f84d27;
	}
}

.topic-list {
	height: 600rpx;

	.list-box {
		padding: 20rpx 20rpx 0 20rpx;
		font-size: 28rpx;
		color: #666;

		.list-item {
			padding-bottom: 20rpx;

			> view {
				width: 80rpx;
				height: 80rpx;
				background-color: #fff;
				border: #ddd solid 1px;
				border-radius: 50%;
				// margin: 0 auto;

				&.active {
					border: #0089ff solid 1px;
				}

				&.success {
					background-color: #dbf2ff;
					color: #0089ff;
					border: none;

					&.active {
						border: #0089ff solid 1px;
					}
				}

				&.success1 {
					background-color: #0089ff;
					color: #fff;
					border: none;
				}

				&.error {
					background-color: #ffeceb;
					color: #f84d27;
					border: none;

					&.active {
						border: #f84d27 solid 1px;
					}
				}

				&.error1 {
					background-color: red;
					color: #fff;
					border: none;
				}
			}
		}
	}
}

.swiper {
	height: 100%;

	.swiper-scroll {
		height: 100%;
	}

	.swiper-item {
		background-color: #fff;
		box-sizing: border-box;
		height: 100%;

		.topic-content {
			padding: 30rpx;
			font-size: 32rpx;
			color: #333;
			line-height: 1.6;

			image {
				width: 660rpx !important;
			}

			// 题目类型标签
			.type-label {
				background-color: #0089ff;
				color: #fff;
				border-radius: 6rpx;
				padding: 4rpx 10rpx;
				font-size: 24rpx;
			}

			// 答题卡
			.answer-sheet {
				margin: 40rpx -30rpx;
				padding: 20rpx;

				.item {
					padding: 20rpx 30rpx;
					background-color: #f5f5f5;
					border-radius: 20rpx;
					margin-bottom: 20rpx;

					&:active {
						background-color: #f3f3f3;
					}

					+ .item {
						margin-top: 0;
					}

					.icon {
						margin-right: 20rpx;
						box-shadow: 0 0 5px #999;
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						font-size: 26rpx;

						&.success {
							background-color: #0089ff;
							color: #fff;
						}

						&.error {
							background-color: #f84d27;
						}
					}
				}
			}

			// 答题结果
			.answer-result {
				background-color: #f3f3f3;
				border-radius: 8rpx;
				padding: 20rpx 30rpx;
				font-size: 28rpx;
			}

			// 题目解析
			.answer-doubt {
				font-size: 28rpx;
				color: #8a6d3b;
				background-color: #fcf8e3;
				border: #faebcc solid 1px;
				margin-top: 40rpx;
				padding: 20rpx 30rpx;
				border-radius: 8rpx;
				word-break: break-all;

				image {
					width: 620rpx !important;
				}
			}
		}
	}
}

// 底部面板
.panel-bottom {
	position: absolute;
	left: 0;
	// bottom: 0;
	// top: 100rpx;
	height: auto;
	width: 100%;
	z-index: 2;

	// 遮罩
	.shade {
		position: fixed;
		z-index: 9;
		background-color: rgba(33, 33, 33, 0.5);
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	// 内容
	.content {
		position: absolute;
		z-index: 10;
		bottom: 0;
		left: 0;
		width: 100%;
		height: auto;
		background-color: #fff;
	}

	// 操作栏
	.action-bar {
		height: 100rpx;
		width: 100%;
		box-sizing: border-box;
		border-bottom: #ddd solid 1px;
		font-size: 28rpx;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;

		.success-num {
			color: #0089ff;
		}

		.error-num {
			color: #f84d27;
		}
	}

	// 题目列表
	.topic-list {
		height: 600rpx;

		.list-box {
			padding: 20rpx 20rpx 0 20rpx;
			font-size: 28rpx;
			color: #666;

			.list-item {
				padding-bottom: 20rpx;

				> view {
					width: 80rpx;
					height: 80rpx;
					background-color: #fff;
					border: #ddd solid 1px;
					border-radius: 50%;
					margin: 0 auto;

					&.active {
						border: #0089ff solid 1px;
					}

					&.success {
						background-color: #dbf2ff;
						color: #0089ff;
						border: none;

						&.active {
							border: #0089ff solid 1px;
						}
					}

					&.error {
						background-color: #ffeceb;
						color: #f84d27;
						border: none;

						&.active {
							border: #f84d27 solid 1px;
						}
					}
				}
			}
		}
	}
}
</style>
